@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Assignment 1
   
   Author: Aaron Ng
   Date: 12 May 2024    
   Filename: Zero Hunger Txt.css

*/
/* Set Defaut*/
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
   max-width: 1920px; /* Width Resolution of 1920px */
}

html {
   max-width: 1920px; /* Width Resolution of 1920px */
}

:root {
   --text-color: #fff;
   --main-color: #ff4d05;
}

header.sticky {
   background: rgba(0, 100, 0, 0.3);
   border-bottom: 2px solid rgba(0, 100, 0, 0.3);
   padding: 12px 15%;
}

/* Menu Icon */
#menu-icon {
   font-size: 35px;
   color: white;
   z-index: 1001;
   cursor: pointer;
   margin-left: 75px;
   display: none;
}

html {
   scroll-behavior: smooth;
}

.fullContainer {
   width: 100%;
}
p {
   font-size: 14px;
   line-height: 26px;
}
.sectionTitle {
   width: 300px;
   border-bottom: 3px solid var(--themeGreen);
   text-align: center;
   font-size: 2rem;
   font-weight: 200;
   margin: 0 auto 50px;
   position: relative;
   padding: 10px 0;
   text-transform: uppercase;
}

.sectionTitle::after {
   display: inline-block;
   content: "";
   height: 15px;
   width: 15px;
   background-color: var(--themeGreen);
   position: absolute;
   left: calc(50% - 10px);
   top: calc(75% - 7px);
   transform: rotate(45deg) translate(50%, 50%);
   border: 3px solid #FFFF00;
}

section {
   padding: 100px 0;
   position: relative;
}
/* creating variables */
:root {
   --themeGreen: #2cd737;
   --gray: #efefef;
}

/* Body */
body {
   background: linear-gradient(to right, #FFD700 0%, #FFFF00 50%, #FFD700 100%);
}
/* Home Section */
.container {
   width: 1140px;
   margin: auto;
}

.banner {
   min-height: 100vh;
   width: 100%;
   background-image: url('Charity\ Page.jpg');/* Unsplash Istock Image */
   background-size: cover;
   background-attachment: fixed;
}
.banner h1 {
   margin-top: 280px;
   display: inline-block;
   font-size: 3.5rem;
   color: #fff;
   text-shadow: 0 0 2px #000;
   width: 50%;
   line-height: 4.2rem;
   font-weight: 100;
}
.banner h1 span {
   background-color: var(--themeGreen);
   display: inline-block;
   color: yellow;
   line-height: 3.5rem;
   padding: 0 15px;
   font-weight: 600;
   border-radius: 5px;
}
.banner p {
   color: #fff;
   width: 50%;
   text-shadow: 0 0 2px #000;
   margin-top: 10px;
}
.banner button {
   background-color: var(--themeGreen);
   border: 0;
   outline: none;
   padding: 10px 15px;
   margin-top: 20px;
   font-size: 13px;
   border-radius: 3px;
   font-weight: 600;
   transition: 0.4s;
}
.banner button:hover {
   background-color: #3c7c23;
   cursor: pointer;
   transform: scale(1.2);
   transition: all .4s ease;
}

.banner button a {
   color: yellow;
   text-decoration: none;
   display: inline-block;
   transition: 0.4s;
}
.banner button a:hover {
   text-decoration: underline;
   font-size: 16px;
}
/* About Section */ 

#aboutSection .cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   margin-top: 50px;
   position: relative;
   height: 245px;
}
#aboutSection .cards > div {
   width: 350px;
   background-color: var(--gray);
   padding: 35px;
   color: #444;
   text-align: center;
   border-radius: 15px;
   height: 255px;
   border: 1px solid #ccc;
   transition: 0.4s;
}

#aboutSection .cards > div:hover {
   width: 400px;
   margin-top: -20px;
   border-color: var(--themeGreen);
   padding: 55px;
   height: auto;
   background-color: rgb(62,62,62);
color: white;
cursor: pointer;
transition: all 1s ease;
}
#aboutSection .cards > div .title {
   font-size: 18px;
   font-weight: 600;
   text-transform: uppercase;
}
#aboutSection .cards > div p {
   font-size: 12px;
   margin-top: 15px;
}
#aboutSection .cards > div button {
   border: 1px solid var(--themeGreen);
   outline: none;
   padding: 7px 15px;
   margin-top: 15px;
   font-size: 12px;
   border-radius: 3px;
   cursor: pointer;
   transition: 0.3s;
}
#aboutSection .cards > div button a {
   font-size: 12px;
   transition: 0.3s;
   color: black;
   text-decoration: none;
}
#aboutSection .cards > div button a:hover {
   font-size: 16px;
   transition: 0.3s;
   color: rgb(11, 61, 11);
   text-decoration: underline;
}
#aboutSection .cards > div:hover button {
   background-color: var(--themeGreen);
   color: #fff;
}
/* Navigation Bar */
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: 20px 160px;
   background: rgba(0, 100, 0, 0.3);
   backdrop-filter: blur(10px);
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 100;
   border-radius: 30px;
   text-align: center;
   border-bottom: 2px solid rgba(0, 100, 0, 0.3);
   z-index: 2;
}
.header span {
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent,
   rgba(0, 100, 0, 0.5), transparent);
   transition: 0.5s;
}
.header:hover span:nth-of-type(1) {
   left: 100%;
}
.Logo {
   font-size: 48px;
   text-decoration: none;
   font-weight: 700;
   background: linear-gradient(to right, #FFD700 0%, #FFFF00 50%, #FFD700 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   position: relative;
   display: inline-block;
}
.navbar a {
   position: relative;
   font-size: 25px;
   background: linear-gradient(to right, #FFD700 0%, #FFFF00 50%, #FFD700 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   font-weight: 500;
   text-decoration: none;
   margin-left: 40px;
   transition: 0.3s;
}
/* Program Section */
.programs {
   background: linear-gradient(to right, #3c7c23 0%, #6bbd45 50%, #3c7c23 100%);
}

.programs .boxContainer {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 50px;
}
.programs .boxContainer .box {
   background-color: #fff;
   text-align: center;
   padding-bottom: 25px;
   border-radius: 5px;
   box-shadow: 0 0 3px 0 #c5c5c5;
   position: relative;
   margin-bottom: 15px;
}
.programs .boxContainer .box .cardImage{
   width: 100%;
   height: 300px;
   background-position: center;
   background-size: cover;
   position: relative;
   overflow: hidden;
   border-radius: 5px 5px 0 0;
}

.programs .boxContainer .box .cardImage:after {
   width: 100%;
   height: 100%;
   background-position: center;
   background-size: cover;
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   filter: grayscale(100%);
   transition: 0.4s;
}
.programs .boxContainer .box:nth-child(1) .cardImage,
.programs .boxContainer .box:nth-child(1) .cardImage:after {
   background-image: url('Donate\ Page1.jpg');/* Unsplash Istock Images */
}
.programs .boxContainer .box:nth-child(2) .cardImage,
.programs .boxContainer .box:nth-child(2) .cardImage:after {
   background-image: url('Donate\ Page\ 2.jpg'); /* Unsplash Istock Images */
}
.programs .boxContainer .box:nth-child(3) .cardImage,
.programs .boxContainer .box:nth-child(3) .cardImage:after {
   background-image: url('Donate\ Page\ 3.jpg'); /* Unsplash Istock Images */
}
.programs .boxContainer .box:nth-child(4) .cardImage,
.programs .boxContainer .box:nth-child(4) .cardImage:after {
   background-image: url('Donate\ Page\ 4.jpg'); /* Unsplash Istock Images */
}

.programs .boxContainer .box:hover .cardImage:after {
   top: 100%;
}

.programs .boxContainer .box .programTitle {
   font-size: 16px;
   margin-top: 15px;
   font-weight: 600;
   color: #444;
}

.programs .boxContainer .box .donationCount {
   font-size: 13px;
   font-weight: 600;
   color: #444;
   margin-top: 10px;
}

.programs .boxContainer .box .donationCount span{
   color: var(--themeGreen);
}

.programs .boxContainer .box button {
   position: absolute;
   left: 50%;
   background-color: var(--themeGreen);
   color: #fff;
   transform: translate(-50%);
   bottom: -15px;
   border-radius: 60px;
   padding: 7px 15px;
   border: 0;
   outline: none;
   cursor: pointer;
}
.programs .boxContainer .box button:hover {
   background-color: rgb(11, 50, 11);
   padding: 10px 22px;
   transition: all .6s ease;
   translate: 0 25px;
}
.programs .boxContainer .box button a {
   color: #fff;
   text-decoration: none;
}
.programs .boxContainer .box button a:hover {
   color: rgb(83, 231, 70);
   text-decoration: underline;
   transition: all .4s ease;
   font-size: 16px;
}
/* Education Section Start */
.education {
   height: 100vh;
   overflow: hidden;
   position: relative;
}
.education .videoPlayer {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   transform: translate(-50%, -50%);
}
.education .sectionTitle {
   color: #fff;
   text-shadow: 0 0 4px #000;
}
.educationContainer h3 span {
   font-weight: bold;
   color: yellow;
}
.education .educationContainer {
   position: absolute;
   background-color: #00000096;
   width: 600px;
   top: 35vh;
   color: #fff;
   text-shadow: 0 0 3px #000;
   padding: 30px;
}
.education .educationContainer h3{
   font-size: 35px;
   font-weight: 300;
}
.education .educationContainer p {
   font-size: 15px;
   line-height: 20px;
   margin: 10px 0 30px;
}
.education .educationContainer button {
   background-color: var(--themeGreen);
   border: 0;
   padding: 10px 25px;
   font-weight: bold;
   font-size: 14px;
   outline: none;
   cursor: pointer;
   transition: .4s;
}
.education .educationContainer button:hover {
   padding: 15px 30px;
   background-color: rgb(22, 79, 22);
}
.education .educationContainer button a{
   color:white;
   text-decoration: none;
   transition: .4s;
}
.education .educationContainer button a:hover{
   font-size: 16px;
   text-decoration: underline;
}
/* Product Section Starts Here */
.selectionContainer {
   translate: 35px;
   width: 1550px;
   margin: auto;
}
.product {
   width: 100%;
   height: 130vh;
   display: flex;
   justify-content: center;
   align-items: center;
}
.productsGroup {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}
.productContainer {
   width: 90%;
   max-width: 750px;
   display: flex;
}
.image-gallery {
   flex-basis: 43%;
   background: #011627;
   box-shadow: -10px 5px 10px 10px rgba(0, 0, 0, 0.1);
   transform: scale(1.07);
   position: relative;
}
.image-gallery img {
   width: 100%;
   padding-top: 150px;
}
.image-gallery .controls {
   position: absolute;
   bottom: 40px;
   right: 20px;
}
.image-gallery .controls .btn{
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.5);
   display: block;
   margin-bottom: 10px;
   cursor: pointer;
}
.image-gallery .controls .btn1{
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.5);
   display: block;
   margin-bottom: 10px;
   cursor: pointer;
}
.image-gallery .controls .btn.active {
   background: #00b4d8;
}
.image-gallery .controls .btn1.active {
   background: #00b4d8;
}
.product-details {
   flex-basis: 53%;
   background: #fff;
   box-shadow: -10px 5px 10px 10px rgba(0, 0, 0, 0.1);
   padding: 40px 30px 40px 40px;
}
.product-details .details {
   margin-bottom: 20px;
}
.product-details .details h2 {
   font-size: 25px;
   font-weight: 600;
   line-height: 35px;
   text-transform: capitalize;
   margin-bottom: 15px;
   color: #011627;
}
.product-details .details h3 {
   font-size: 20px;
   font-weight: 600;
   line-height: 35px;
   margin-bottom: 10px;
   color: #011627;
}
.product-details .details h4 {
   font-size: 18px;
   font-weight: 700;
   line-height: 25px;
   text-transform: uppercase;
   margin-bottom: 15px;
   color: var(--themeGreen);
   margin-bottom: 10px;
}
.product-details .details p {
   font-size: 15px;
   font-weight: 500;
   line-height: 25px;
   color: #011627;
}
.product-details .sizes {
   margin-bottom: 20px;
}
.product-details .sizes .form .select-size{
   display: flex;
   align-items: center;
}
.product-details .sizes .form .select-size h3 {
   width: 70%;
   margin-right: 30px;
   font-size: 20px;
   font-weight: 500;
   color: #011627;
}
.product-details .sizes .form .select-size label {
   display: flex;
   align-items: center;
}
.product-details .sizes .form .select-size label input {
   display: none;
}
.product-details .sizes .form .select-size label span {
   font-size: 18px;
   font-weight: 400;
   line-height: 25px;
   text-transform: uppercase;
   color: #011627;
   display: inline-block;
   margin-right: 40px;
   cursor: pointer;
}
.product-details .sizes .form .select-size label input:checked + span {
   font-weight: 600;
   color: #00b4d8;
}
.product-details .colors {
   margin-bottom: 20px;
}
.product-details .colors .form .select-color{
   display: flex;
   align-items: center;
}
.product-details .colors .form .select-color h3 {
   width: 70%;
   margin-right: 30px;
   font-size: 20px;
   font-weight: 500;
   color: #011627;
}
.product-details .colors .form .select-color {
   display: flex;
   align-items: center;
}
.product-details .colors .form .select-color input {
   display: none;
}
.product-details .colors .form .select-color span {
   display: inline-block;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   margin-right: 60px;
   cursor: pointer;
}
.product-details .colors .form .select-color .color-1 {
   background: #d90429;
}
.product-details .colors .form .select-color .color-2 {
   background: #38b000;
}
.product-details .colors .form .select-color .color-3 {
   background: #0081a7;
}
.product-details .colors .form .select-color .color-4 {
   background: #ffd100;
}
.product-details .colors .form .select-color input:checked + span {
   transform: scale(.7);
   box-shadow: 0 0 0 4px #fff, 0 0 0 6px #011627;
}
.product-details .quantity {
   margin-bottom: 50px;
}
.product-details .quantity .select-quantity {
   display: flex;
   align-items: center;
}
.product-details .quantity .select-quantity h3 {
   width: 70%;
   margin-right: 30px;
   font-size: 20px;
   font-weight: 500;
   color: #011627;
}
.product-details .quantity .select-quantity input {
   background: #e8e8e8;
   border: 0;
   outline: 0;
   padding: 2px 2px 2px 15px;
   border-radius: 12px;
   width: 50px;
}
.product-details .sub-btn {
   padding: 0 30px;
}
.product-details .sub-btn .submit {
   width: 100%;
   padding: 10px;
   border: 0;
   outline: 0;
   background: #0077b6;
   color: #fff;
   font-size: 15px;
   font-weight: 500;
   border-radius: 30px;
   box-shadow: 0 10px 10px rgba(85, 63, 240, 0.25);
   cursor: pointer;
   transition: .4s linear;
   position: relative;
   overflow: hidden;
}
.product-details .sub-btn a {
   color: #fff;
   text-decoration: none;
   transition: .4s;
}
.product-details .sub-btn a:hover {
   color: #38ec3b;
   font-size: 24px;
   text-decoration: underline;
}
.product-details .sub-btn .submit:hover {
   background: #00b4d8;
}
.product-details .sub-btn .submit::before {
   content: '';
   position: absolute;
   left: -100%;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.1);
   transform: rotate(-45deg);
}
.product-details .sub-btn .submit:hover::before {
   animation: light .4s linear forwards;
}
@keyframes light {
   0% {
      left: -100%;
   }
   100% {
      left: 100%;
   }
}
/* Gallery Start here */
.gallery .galleryContainer {
   column-count: 4;
   column-gap: 20px;
}
.gallery .galleryContainer .item {
   position: relative;
   margin-bottom: 20px;
   overflow: hidden;
}
.gallery .galleryContainer img {
   width: 100%;
   display: block;
   transition: 0.4s;
}
.gallery .galleryContainer .title {
   position: absolute;
   background-color: var(--gray);
   padding: 5px;
   margin: 5px;
   border-radius: 5px;
   font-size: 13px;
   font-weight: bold;
   opacity: 0;
   z-index: 1;
   transition: 0.4s;
}
.gallery .galleryContainer .item:hover .title {
   opacity: 1;
}

.gallery .galleryContainer .item:hover img {
   transform: scale(1.2);
}

/* Join Section */ 
.join {
   background-color: #3cb93c;
   color: #fff;
}

.join .joinTitle {
   font-size: 40px;
   font-weight: 100;
}

.join .joinTitle span {
   font-weight: 800;
   color: yellow;
}

.join button {
   padding: 7px 15px;
   margin-top: 20px;
   border: 0;
   outline: none;
   font-weight: 600;
   font-size: 16px;
}

.join button.joinNow {
   margin-right: 10px;
   background-color: #0e4919;
   transition: background-color 0.4s;
}
.join button.joinNow:hover {
   width: 100px;
   height: 48px;
   background-color: #021305 ;
}
.join button.joinNow a {
   color: #fff;
   text-decoration: none;
   display: inline-block;
   transition: 0.3s;
}

.join button.joinNow a:hover {
   text-decoration: underline;
}

.join button.saveBtn {
   background-color: yellow;
   transition: background-color 0.4s;
}
.join button.saveBtn:hover {
   width: 120px;
   height: 48px;
   background-color: rgb(169, 169, 31);
}
.join button.saveBtn a {
   color: #000;
   text-decoration: none;
   display: inline-block;
   transition: 0.3s;
}
.join button.saveBtn a:hover {
   text-decoration: underline;
}

/* Footer Section */
footer {
   background-color: #0a250f;
   color: yellow;
   padding: 50px 0;
   font-size: 14px;
}
footer .container {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 50px;

}

footer .title {
   font-size: 20px;
   font-weight: 600;
   text-transform: uppercase;
   border-bottom: 2px solid;
   margin-bottom: 30px;
   padding: 0 0 5px 0;
}

footer p {
   margin-bottom: 10px;
}

footer .linksContainer ul {
   list-style-type: none;
}

footer .linksContainer ul li a {
   text-decoration: none;
   color: yellow;
   margin-bottom: 10px;
   display: inline-block;
   transition: background-color 0.3s;
}

footer .linksContainer ul li a:hover {
   text-decoration: underline;
   background-color: #218838;
}

footer .newsLetterContainer img {
   width: 120px;
   height: 120px;
   margin-bottom: 11px;
}

footer .newsLetterContainer input {
   background-color: transparent;
   border: 1px solid yellow;
   outline: none;
   padding: 10px 15px;
   width: 100%;
   margin-top: 10px;
   color: yellow;
   border-radius: 30px;
}
footer .connectContainer p a {
   text-decoration: none;
   color: yellow;
   display: inline-block;
   transition: background-color 0.3s;
}
footer .connectContainer p a:hover {
   text-decoration: underline;
   background-color: #218838;
}
/* Responsive Code Starts */
@media screen and (max-width: 1140px) {
   .container {
      width: 100%;
      padding: 0 15px;
   }
   header.sticky {
      padding: 10px 2.5%;
      transition: .1s;
   }

   .education .videoPlayer {
      width: 1280px;
   }
   .productsGroup {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 80px;
   }
   .product {
      width: 100%;
      height: 240vh;
      display: flex;
   }
}

@media screen and (max-width: 1080px) {
   .banner h1 {
      margin-top: 200px;
   }
   #aboutSection .cards {
      justify-content: space-around;
      height: auto;
   }
   #aboutSection .cards > div {
      margin: 10px 0;
   }
}

@media screen and (max-width: 1024px) {
   .banner {
      background-position-x: 45%;
   }
   .banner h1 {
      font-size: 2.5rem;
   }
   .programs .boxContainer {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media screen and (max-width: 840px) {
   #menu-icon {
      display: block;
   }
   .navbar {
      position: absolute;
      top: -1000px;
      right: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      background: rgba(0, 100, 0, 0.3);
      backdrop-filter: blur(10px);
      text-align: left;
      transition: all .45s ease;
      border-bottom: 2px solid rgba(0, 100, 0, 0.3);
   }
   .navbar a {
      display: block;
      font-size: 20px;
      margin: 17px;
      transform: all .45s ease;
   }
   .navbar a:hover {
      color: var(--main-color);
   }
   .navbar a:active {
      color: var(--text-color);
   }
   .navbar.open {
      top: 100%;
   }
   .banner {
      background-position-x: 65%;
   }

   .banner p {
      font-size: 14px;
   }

   .banner p, .banner h1 {
      width: 70%;
   }

   #aboutSection .cards > div:hover {
      width: 350px;
   }
   .education .educationContainer {
      width: 96%;
   }
   .education .educationContainer h3 {
      font-size: 30px;
      line-height: 35px;
   }
   .education .educationContainer p {
      margin: 10px 0 20px;
   }

   .gallery .galleryContainer {
      column-count: 2;
   }
}

@media screen and (max-width: 500px) {
   .banner h1 {
      font-size: 2rem;
      line-height: 3rem;
   }
   .banner button {
      margin-bottom: 10px;
   }
   #aboutSection p{
      text-align: justify;
   }
   #aboutSection .cards > div:hover {
      width: 500px;
      margin-top: 10px;
      padding: 35px;
   }
   .programs .boxContainer {
      grid-template-columns: 1fr;
   }

   .education .videoPlayer {
      width: 1400px;
   }

   .education .educationContainer {
      width: 93%;
   }
   .gallery .galleryContainer {
      column-count: 1;
   }

   footer .container {
      grid-template-columns: 1fr;
   }
}

@media screen and (max-width: 400px) {
   .education .educationContainer h3 {
      font-size: 18px;
      line-height: 24px;
   }
   .education .educationContainer p {
      font-size: 13px;
   }
}
/* Navigation Bar Animation */
.navbar a:hover {
   color: #0ef;
}
.navbar span {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   border-bottom: 4px solid #0ef;
   border-radius: 15px;
   transform: scale(0) translateY(50px) translateX(-4px);
   opacity: 0;
   transition: 0.5s;
}
.navbar a:hover span:nth-child(5) {
   transform: scale(1) translateY(5px) translateX(-4px);;
   opacity: 1;
}
.navbar a:hover {
   color: #0ef;
   background: #2196f3;
   box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
   transition-delay: 0.5s;
   border-radius: 10px;
}


.navbar a span {
   position: absolute;
   display: block;
}




.navbar a span:nth-child(1) {
   top: 0;
   left: -100%;
   width: 100%;
   height: 2px;
   background: linear-gradient(90deg, transparent, #2196f3);
}



.navbar a:hover span:nth-child(1) {
   left: 100%;
   transition: 0.5s;
}


.navbar a span:nth-child(3) {
   bottom: 0;
   right: -100%;
   width: 100%;
   height: 2px;
   background: linear-gradient(270deg, transparent, #2196f3);
}

.navbar a:hover span:nth-child(3) {
   right: 100%;
   transition: 1s;
   transition-delay: 0.5s;
}



.navbar a span:nth-child(2) {
   top: -100%;
   right: 0;
   width: 2px;
   height: 100%;
   background: linear-gradient(180deg, transparent, #2196f3);
}

.navbar a:hover span:nth-child(2) {
   top: 100%;
   transition: 1s;
   transition-delay: 0.25s;
}